<template>
	<view class="wrap">
		<input type="text" value=""  placeholder="手机号" v-model="username"/>
		<input type="text" value="" placeholder="由六位组成,第一位必须为大写字母"  v-model="password"/>
		<view class="signBtn" @click="sign">立即注册</view>
		<view class="loginTxt">已有账号？<navigator url="/pages/login/login">去登录</navigator></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username:"",
				password:"",
				userList:[]
			}
		},
		created() {
			if(uni.getStorageSync("userList")){
				this.userList = uni.getStorageSync("userList")
			}else{
				this.userList = []
			}
		},
		methods: {
			sign(){
				let phoneReg = /^[1][3,5,7,8,9][0-9]{9}$/
				let passwordRed = /^[A-Z]\w{5}$/
				let userState = false
				if(phoneReg.test(this.username)){
					userState = true
				}
				if(userState){
					if(passwordRed.test(this.password)){
						let state = false
						state = this.userList.some(v=>v.username == this.username)
						
						if(!state){
							let obj = {"username":this.username,"password":this.password}
							this.userList.push(obj)
							uni.setStorageSync("userList",this.userList)
							uni.showToast({
								title:"注册成功"
							})
						}else{
							uni.showToast({
								title:"用户名存在",
								icon:"error"
							})
						}
					}else{
						uni.showToast({
							title:"密码不符合规则",
						})
					}
				}else{
					uni.showToast({
						title:"账号不符合规则",
					})	
				}
				
			}
		}
	}
</script>

<style lang="less">
	.wrap{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 30rpx;
		input,.signBtn{
			width: 600rpx;
			height: 80rpx;
			border: 2rpx solid gray;
			border-radius: 40rpx;
			margin: 20rpx 0;
		}
		input{
			padding-left: 30rpx;
		}
		.signBtn{
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: orangered;
			color: white;
			border: none;
		}
		.loginTxt{
			display: flex;
			navigator{
				color: orangered;
				text-decoration: underline;
			}
		}
	}
</style>
